<template>
  <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="100px" class="demo-ruleForm dict-form">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="部门名称" prop="deptName">
            <el-input v-model="formData.deptName" disabled="disabled" />
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="部门类型" prop="type">
            <el-select v-model="formData.type" disabled="disabled">
              <el-option
                v-for="item in types"
                :key="item.itemKey"
                :label="item.itemValue"
                :value="item.itemKey"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="上级部门" prop="parentId">
            <el-select v-model="formData.parentId" disabled="disabled">
              <el-option
                v-for="item in depts"
                :key="item.id"
                :label="item.deptName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="排序" prop="sort">
            <el-input-number v-model="formData.sort" :min="1" :max="1000" label="部门排序" disabled="disabled" />
          </el-form-item>
        </div>
      </el-col>
    </el-row>

    <el-form-item label="备注" prop="remark">
      <el-input v-model="formData.remark" type="textarea" disabled="disabled" />
    </el-form-item>

    <el-form-item style="text-align: center;">
      <el-button @click="$router.back(-1)">返回</el-button>
    </el-form-item>

  </el-form>
</template>

<script>
  import {getAllDeptByOrgId, getDataById, save} from '@/api/org/dept/index'
  import {getItemByDictKey} from '@/api/sys/dict/item/index'

  export default {
  data() {
    return {
      permissions: [],
      formData: {
        deptName: '',
        parentId: '',
        type: '',
        sort: '',
        remark: ''
      },
      rules: {
        deptName: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
        ],
        parentId: [
          { required: true, message: '请选择上级部门', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择部门类型', trigger: 'blur' }
        ]
      },
      types: [],
      depts: []
    }
  },
  created() {
    if (this.$route.query.id) {
      this.getDept()
      this.getDict('dept_type')
      this.getDataById()
    } else {
      this.$router.push({ name: 'dept_mgr_list' })
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          save(this.formData).then(() => {
            this.loading = false
            this.$router.push({ name: 'dept_mgr_list' })
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getDept() {
      getAllDeptByOrgId().then(res => {
        this.depts.push({
          id: 0,
          deptName: '顶级部门'
        })
        this.depts = this.depts.concat(res.data)
      })
    },
    getDataById() {
      getDataById(this.$route.query.id).then(res => {
        this.formData = res.data
      })
    },
    getDict(dictKey) {
      getItemByDictKey(dictKey).then(res => {
        if (res.data) {
          this.types = res.data
        }
      })
    }
  }
}
</script>

<style scoped>
.dict-form{
  padding-top: 30px;
  padding-right: 30px;
}
</style>
